<template>
  <section class="banner">
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="cityslist" @mouseleave="citychildren = []">
          <p
            v-for="(item, index) in citylists"
            :key="index"
            class="cityNav"
            @mouseenter="appear(index)"
          >
            {{ item.type }} <i class="el-icon-arrow-right"></i>
          </p>
          <div class="citysRanking" v-if="citychildren.length">
            <ol>
              <li
                v-for="(v, index) in citychildren"
                :key="index"
                style="line-height: 35px; height: 35px"
              >
                <em
                  style="color: orange; font-style: italic; margin-right: 10px"
                  >{{ index + 1 }}</em
                >
                <nuxt-link
                  :to="`strategy?city=${v.city}&start=0&limit=3`"
                  style="color: orange"
                  >{{ v.city }}</nuxt-link
                >
                &nbsp;&nbsp;
                <nuxt-link
                  :to="`strategy?city=${v.city}&start=0&limit=3`"
                  style="color: #999999; font-size: 14px"
                  >{{ v.desc }}</nuxt-link
                >
              </li>
            </ol>
          </div>
        </div>
        <h3 style="margin-top: 20px">推荐城市</h3>
        <hr />
        <!-- 可以补充一个轮播图的位置 -->
        <el-carousel trigger="click" height="150px" indicator-position="none">
          <el-carousel-item v-for="item in rotation" :key="item.id">
            <nuxt-link
              :to="{ path: '/strategy/acticleDetails', query: { id: item.id } }"
            >
              <div class="small">
                <img :src="item.images[0]" style="width: 100%; height: 100%" />
                <p class="article">{{ item.title }}</p>
              </div>
            </nuxt-link>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="17">
        <el-input
          placeholder="请输入想去的地方，比如：'广州'"
          v-model.trim="input"
          class="input-with-select"
        >
          <i
            class="el-icon-search"
            slot="suffix"
            @click="handleIconClick"
            style="font-size: 25px; color: orange; margin: 8px 0"
          >
          </i>
        </el-input>
        <div class="recommend" style="padding: 10px 0; font-size: 14px">
          推荐:
          <nuxt-link
            v-for="(v, ind) in suggestCitys"
            :to="`strategy?city=${v}&start=0&limit=3`"
            :key="ind"
            class="suggestCitys"
            style="margin: 0 5px"
            >{{ v }}</nuxt-link
          >
        </div>
        <p class="suggest_strategy">
          <span>推荐攻略</span
          ><nuxt-link :to="{ path: '/strategy/create' }">
            <el-button type="primary" icon="el-icon-edit">写游记</el-button>
          </nuxt-link>
        </p>
        <div class="no_data" v-show="isshow">
          <p style="font-size: 14px">
            <span> 暂时没有该地区攻略哦~~</span
            ><nuxt-link
              :to="{ path: '/strategy/create', query: { city: input } }"
              ><el-link type="warning">去写一篇~~</el-link></nuxt-link
            >
          </p>
        </div>
        <div class="suggest_article" v-for="v in strategy.data" :key="v.id">
          <div class="third_imgs" v-if="v.images.length > 1">
            <nuxt-link
              :to="{ path: '/strategy/acticleDetails', query: { id: v.id } }"
            >
              <h3 style="">
                {{ v.title }}
              </h3>
              <p class="introduce_acticle" v-html="v.summary"></p>
              <div class="introduce_img">
                <img
                  :src="value"
                  v-for="value in v.images.slice(0, 3)"
                  :key="value"
                />
              </div>
            </nuxt-link>
            <div class="account">
              <div class="account_left">
                <i class="el-icon-location-outline">{{ v.cityName }}</i
                >by
                <span style="color: orange"
                  ><img
                    :src="$axios.defaults.baseURL + v.account.defaultAvatar"
                    style="width: 15px"
                  />{{ v.account.nickname }}</span
                >
                <i class="el-icon-view">{{ v.watch }}</i>
              </div>
              <span class="account_right" style="color: orange"
                >{{ v.like }}赞</span
              >
            </div>
          </div>
          <div v-else>
            <nuxt-link
              :to="{ path: '/strategy/acticleDetails', query: { id: v.id } }"
            >
              <div class="first_imgs">
                <div class="introduce_img" v-if="v.images[0]">
                  <img :src="value" v-for="value in v.images" :key="value" />
                </div>
                <div class="text">
                  <h3>
                    {{ v.title }}
                  </h3>
                  <p class="introduce_acticle" v-html="v.summary"></p>
                  <div class="account">
                    <div class="account_left">
                      <i class="el-icon-location-outline">{{ v.cityName }}</i
                      >by
                      <span style="color: orange" @click="user"
                        ><img
                          :src="
                            $axios.defaults.baseURL + v.account.defaultAvatar
                          "
                          style="width: 15px"
                        />{{ v.account.nickname }}</span
                      >
                      <i class="el-icon-view">{{ v.watch }}</i>
                    </div>
                    <span class="account_right" style="color: orange"
                      >{{ v.like }}赞</span
                    >
                  </div>
                </div>
              </div>
            </nuxt-link>
          </div>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="strategy.total"
          v-show="!isshow"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      input: "",
      citylists: [],
      strategy: {},
      suggestCitys: ["上海", "广州", "北京"],
      start: 0,
      pageSize: 3,
      citychildren: [],
      isshow: false,
      rotation: [], //轮播图数据
    };
  },
  methods: {
    handleIconClick() {
      this.$router.push({
        path: `strategy?city=${this.input}&start=0&limit=3`,
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getActicle();
    },
    handleCurrentChange(val) {
      this.start = (val - 1) * this.pageSize;
      this.getActicle();
      // console.log(`当前页: ${val}`);
    },
    //鼠标移入城市显示推荐
    appear(v) {
      this.citychildren = this.citylists[v].children;
    },
    user() {
      console.log(123);
    },
    write() { },
    //根据城市获取来进行数据渲染
    //获取文章
    getActicle(city) {
      this.$axios({
        url: "/posts",
        method: "get",
        params: {
          city,
          _limit: this.pageSize,
          _start: this.start,
        },
      }).then((res) => {
        this.strategy = res.data;
        this.rotation = res.data.data;
        console.log(this.strategy);
        if (this.strategy.data.length == 0) {
          this.isshow = true;
        } else {
          this.isshow = false;
        }
      });
    },
    // getRecomCity() {
    //   this.$axios({
    //     url: "/posts/recommend",
    //     method: "get",
    //   }).then((res) => {
    //     console.log(res.data.data);
    //     this.rotation = res.data.data;
    //   });
    // },
  },
  mounted() {
    this.$axios({
      url: "/posts/cities",
      method: "get",
    }).then((res) => {
      this.citylists = res.data.data;
    });
    // this.getRecomCity();
    this.getActicle();
  },
  watch: {
    "$route.query.city"() {
      if (!this.$route.query.city) {
        this.getActicle();
      }
      this.getActicle(this.$route.query.city);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-carousel__container {
  margin-top: 15px;
}
/deep/ .el-carousel__indicators {
  display: flex;
  width: 80%;
  justify-content: center;
  margin-top: 20px;
}
.el-carousel__item {
  background-color: #99a9bf;
}
.banner {
  width: 1000px;
  margin: 20px auto 0;

  &_right {
    width: 100%;
    height: 100%;
  }
  .cityslist {
    position: relative;
    .cityNav {
      position: relative;
      z-index: 88;
      display: flex;
      align-items: center;
      height: 40px;
      justify-content: space-between;
      padding: 0 15px;
      cursor: pointer;
      border: 1px solid #dfdfdf;
      border-top: 0 none;
      &:first-child {
        border-top: 1px solid #dfdfdf;
      }
      // &:not(:last-child) {
      //   border-bottom: 1px solid #dfdfdf;
      // }
      &:hover {
        color: orange;
        border-right: 1px solid #ffffff;
      }
    }
    .citysRanking {
      position: absolute;
      width: 350px;
      padding: 10px;
      left: 249px;
      top: 0;
      z-index: 66;
      background-color: #ffffff;
      border: 1px solid #dfdfdf;
      .nuxt-link-active:hover {
        text-decoration: underline;
      }
    }
  }
}
/deep/ .input-with-select {
  color: black;
  border: 2px solid orange;
}
.suggestCitys:hover {
  color: orange;
  text-decoration: underline;
}
.suggest_strategy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e3e3e3;
  span {
    color: orange;
  }
}
.suggest_article {
  border-bottom: 1px solid #b8b8b8;
  padding: 10px 0;
}
.introduce_acticle {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  // "/* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 3;
  // "/* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

.first_imgs {
  display: flex;
  justify-content: space-between;
  align-items: initial;
  height: 160px;
  .introduce_img {
    width: 33%;
    margin-right: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  h3:hover {
    color: orange;
  }
}
.account {
  display: flex;
  justify-content: space-between;
  &_left {
    font-size: 14px;
    color: #b8b8b8;
  }
}
.el-pagination {
  padding: 20px 10px;
}
.third_imgs {
  h3 {
    margin: 10px 0;
    &:hover {
      color: orange;
    }
  }
  .introduce_img {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    // margin-top: 10px;
    img {
      width: 33%;
      height: 150px;
    }
  }
}
.no_data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  p {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.small {
  position: relative;
  height: 100%;
  width: 100%;
  .article {
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>